<template>
  <div>

    <div class="row" >
      <div class="col-md-6">
        <div class="portlet box grey-cascade">
          <div class="portlet-title">
          <div class="caption">
            <i class="fa fa-globe"></i> 设备实时运行参数
          </div>

          </div>
          <div class="portlet-body">
            <div class="row">
              <div class="col-md-3 col-xs-6 col-sm-6 c333">
                发电机组
                <img src="../../../../static/images/icon1.png" alt="">
                停止
              </div>
              <div class="col-md-3  col-xs-6 col-sm-6 c333">
                发电机组
                <img src="../../../../static/images/icon1.png" alt="">
                停止
              </div>
              <div class="col-md-3 col-xs-6 col-sm-6 c333">
                发电机组
                <img src="../../../../static/images/icon1.png" alt="">
                停止
              </div>
              <div class="col-md-3 col-xs-6 col-sm-6 c333">
                发电机组
                <img src="../../../../static/images/icon1.png" alt="">
                停止
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-2">
        <div class="portlet box grey-cascade">
          <div class="portlet-title">
          <div class="caption">
            <i class="fa fa-globe"></i> 监控及台账
          </div>

          </div>
          <div class="portlet-body">
            <div class="row" style="text-align: center;">
              <div class="c333" data-toggle="modal"  href="#jkInfor">
                监控
              </div>
              <div class="c333" data-toggle="modal"  href="#sbRecord">
                设备台账记录
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="portlet box grey-cascade">
          <div class="portlet-title">
          <div class="caption">
            <i class="fa fa-globe"></i> 监控及台账
          </div>
          </div>
          <div class="portlet-body">
            <div class="row">
              <div class="col-md-6 col-xs-6 c333">
                <img src="../../../../static/images/icon1.png" alt=""> 
                气温 <span class="color">28.0℃</span>
              </div>
              <div class="col-md-6 col-xs-6 c333">
                <img src="../../../../static/images/icon1.png" alt=""> 
                湿度 <span class="color">28.%</span>
              </div>
              <div class="col-md-6 col-xs-6 c333">
                <img src="../../../../static/images/icon1.png" alt=""> 
                烟感探测 <span class="color">正常</span>
              </div>
              <div class="col-md-6 col-xs-6 c333">  
                <img src="../../../../static/images/icon1.png" alt=""> 
                水浸探测 <span class="color">正常</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>  
    <div class="row"> 
      <div class="col-md-12">
        <!-- BEGIN EXAMPLE TABLE PORTLET-->
        <div class="portlet box grey-cascade">
          <div class="portlet-title">
            <div class="caption">
              <i class="fa fa-globe"></i>发电机房数据
            </div>
            <div class="cz">
              <button class="btn green" @click="tableClick">列表 <i class="fa fa-plus"></i></button>
              <button class="btn green" @click="imgClick">图表 <i class="fa fa-trash-o"></i></button>
              <button id="sample_editable_1_new" class="btn red" data-toggle="modal"  @click="allDelete()">批量删除 <i class="fa fa-trash-o"></i></button>
            </div>
          </div>
          <div class="portlet-body">
            <div class="row mb10">
                <div class="col-md-2">
                  <select class="bs-select form-control" style="margin-right: 25px;">
                    <option>全部</option>
                    <option>1号水泵</option>
                    <option>2号水泵</option>
                  </select>
                </div>

                <div class="col-md-3">
                  <select class="bs-select form-control" style="margin-right: 25px;">
                    <option selected="" value="全部">全部</option>
                    <option value="设备维保计划数量">设备维保计划数量</option>
                    <option value="设备维保计划完成数量">设备维保计划完成数量</option>
                    <option value="设备故障率">设备故障率</option>
                    <option value="设备正常运行时长">设备正常运行时长</option>
                  </select>
                </div>
                
                  <label class="control-label style" style="float: left;position: relative;top: 5px; color: #333;font-weight: 500;">起止日期 :</label>
                <div class="col-md-4">
                  <div class="input-group input-large date-picker input-daterange" data-date="10/11/2012" data-date-format="mm/dd/yyyy">
                    <input type="text" class="form-control" name="from">
                    <span class="input-group-addon">
                    to </span>
                    <input type="text" class="form-control" name="to">
                  </div>
                </div>
                <button class="btn green cx">查询 <i class="fa fa-search"></i></button>
            </div>
            <div class="tableDiv" v-show="tableDiv">
              <table class="table table-striped table-bordered table-hover" style="color: #333;font-weight: 500;" id="sample_3">
                <thead>
                  <tr>
                    <th class="table-checkbox">
                      <input type="checkbox" class="group-checkable" data-set="#sample_3 .checkboxes"/> 全选
                    </th>
                    <th>
                       序号
                    </th>
                    <th>
                       设备房编号
                    </th>
                    
                    <th>
                       地址
                    </th>
                    <th>
                       所属小区
                    </th>
                  
                    <th>
                       设备数量
                    </th>
                    <th>
                       设备房状态
                    </th>
                     <th>
                       功能操作
                    </th>
                  </tr>
                </thead>
                <tbody>
                <tr class="odd gradeX" v-for="(item,index) in list">
                  <td>
                    <input type="checkbox" class="checkboxes" value="1"/>
                  </td>
                  <td>
                     {{item.number}}
                  </td>
                  <td>
                    {{item.bh}}
                  </td>
                  <td>
                     {{item.address}}
                  </td>
                 
                 <td>
                     {{item.xq}}
                  </td>
                  <td>
                    {{item.sbNum}}
                  </td>
                  <td v-if="item.type==1">
                     启用
                  </td>
                  <td v-if="item.type==0">
                     停用
                  </td>
                  <td>
                    <a style="color:#5b9bd1" class="infor">详情</a> |
                    <a style="color:#5b9bd1" class="edit"  data-toggle="modal" href="#responsive">编辑</a> |
                    <a style="color:#5b9bd1" data-toggle="modal"  href="#delete" class="delete">删除</a>
                  </td>
                </tr>
                </tbody>
              </table>

              
              <div class="undefinedbootstrap_full_number" id="sample_1_paginate">
                <ul class="pagination" style="visibility: visible;">
                  <li class="prev disabled">
                    <a title="第一">首页</i></a>
                  </li>
                  <li class="prev disabled">
                    <a title="上一页"><i class="fa fa-angle-left"></i></a>
                  </li>
                  <li class="active">
                    <a>1</a>
                  </li>
                  <li>
                    <a>2</a>
                  </li>
                  <li>
                    <a>3</a>
                  </li>
                  <li>
                    <a>4</a>
                  </li>
                  <li>
                    <a>5</a>
                  </li>
                  <li class="next">
                    <a title="下一个"><i class="fa fa-angle-right"></i></a>
                  </li>
                  <li class="next">
                    <a title="持续">尾页</a>
                  </li>
                  
                </ul>
                <span class="dataTotal">
                  每页显示 <span class="numData">20</span> 条数据
                </span>
              </div>
            </div>
            <div class="imgDiv" v-show="imgDiv">
              <div id="container" style="width: 100%;"></div>
            </div>
          </div>
        </div>
        <!-- END EXAMPLE TABLE PORTLET-->
      </div>
    </div>
  </div>

</template>  

<style scoped>
    .cz{float: right;width: auto;position: relative;top: 3px;left: 5px;}
    .mb10{margin-bottom: 10px;}
    p {margin: 0 0 10px;}
    table tr td,table tr th{text-align: center;vertical-align: middle;}
    .search{margin: 0 0 10px;}
    .search .form-control{width: 250px;display: inline-block;}
    .search button{position: relative;top: -2px;color: #fff;}
    .imgDiv img{width: 100%;}
    .undefinedbootstrap_full_number{text-align: center;;}
    .pagination{display: inline-block;}
    .dataTotal{color: #666;font-weight: 500;position: relative;top: -20px;left: 10px;}
    .pagination li a,.pagination li a .fa{color: #666;font-weight: 500;}
    .pagination li.active a,.numData{color: #26a69a;font-weight: 500;}
    .numData{font-size: 16px;}
    .c333{color: #333;font-weight: 500;}
    .color{color: #00CC66;font-weight: 500;}

    .modal-title{color: #333;font-weight: 500;}
    #sample_editable_1_new{margin-right: 10px;}
    #sbRecord {
      width: 50%;
      margin-left: -25%;
      max-height: 400px;
      margin-top: -200px;
      overflow-y: auto;
    }
    .btn.dropdown-toggle{color: #333;}
    @media (max-width: 768px){
      .cz{float:left;margin-bottom: 0px;}
      .dataTotal{top: -5px;}
      .portlet-body select{margin-bottom: 10px;}
      .cx{float: right;position: relative;right: 15px;top: 10px;}
      .table-striped{margin-top: 20px;}
    }
</style>

<script>

  import Metronic from '../../../../static/global/js/metronic.js'
  import {check,Tips} from '../../../../static/js/pages/tips.js'

  import '../../../../static/js/pages/components-pickers.js';   
  import optVue from '../../../config/optVue.js';



  export default {
     data(){
      return{
        list:[],
        tableDiv:true,
        imgDiv:false,
        data:null,
        dataId:null,  
        index:null,
        title:"",
        glNum:2,
        glNumChild:0
      }
    },
    components: {
        
    },
    mounted(){
      document.title = '发电机房详情';
      this.title = document.title
      $(".backstretch").remove();
      optVue.sbwbjgInfor(this);
    

      $(function(){
        /*全选反选*/
        check.init($(".table-checkbox"),$(".checkboxes"));

        /*二级导航高亮*/
 
         var highcharts = require('highcharts')
      
         $('#container').highcharts({
              chart: {
                  type: 'areaspline',
                  animation: highcharts.svg, 
                  marginRight: 10,
                  events: {
                      load: function () {
                          
                          var series0 = this.series[0],
                               series1 = this.series[1],
                               chart = this;
                          setInterval(function () {
                              var x = (new Date()).getTime(), 
                                  y = Math.random();
                              series0.addPoint([x, y], true, true);
                         
                          }, 700);
                      }
                  }
              },
              title: {
                  text: '动态模拟实时数据'
              },
              xAxis: {
                  type: 'datetime',
                  tickPixelInterval: 150,
                  title:{
                    text:"时间",
                    align:"high"
                  }
              },
              yAxis: {
                  title: {
                      text: '值',
                    align:"high",
                    rotation: 0, //旋转
                      y: -20,
                      x: 20
                  },
                  plotLines: [{
                      value: 0,
                      width: 1,
                      color: '#808080'
                  }]
              },
              plotOptions: {
                  areaspline: {
                        fillOpacity: 0.5,
                        lineColor:'000'
                    }
                },
              tooltip: {
                  formatter: function () {
                      return '<b>' + this.series.name + '</b><br/>' +
                          highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                          highcharts.numberFormat(this.y, 2);
                  }
              },
              legend: {
                  enabled: false
              },
              credits:{
                enabled: false  //去掉版权信息
              },
              exporting: {
                  enabled: true
              },
              series: [{
                  name: '随机数据',
                  marker: {
                              enabled: false,  //去掉折线上圆点
                              fillColor:'#fba845'
                          },
                      fillColor : {
                      color:'#rgba(255, 186, 0, 0.2)',
                          linearGradient : {
                              x1: 0,
                              y1: 0,
                              x2: 0,
                              y2: 1
                          },
                          stops : [
                              [0, highcharts.getOptions().colors[0]],
                              [1, highcharts.Color(highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                          ]
                      },
                  data: (function () {
                   
                      var data = [],
                          time = (new Date()).getTime(),i;
                      for (var i = 0; i <= 10; i += 1) {
                          data.push({
                              x: time + i * 1000,
                              y: Math.random()})
                      }
                      return data;
                  }())
              },
            
              ]
          });
      
      })
    },
    methods:{
      deleteData:function (index,data,event) {
        this.data = data;
        this.index = index;
      },
      tableClick:function(){
        this.tableDiv = true;
        this.imgDiv = false;
      },
      
      imgClick:function(){
        this.tableDiv = false;
        this.imgDiv = true;
    
      },
      allDelete:function(event){
        console.log($(".checkboxes").is(':checked'))
        if($(".checkboxes").is(':checked')){
          
        }
      },
    }

  }

</script>  



